<template>
    <el-row :gutter="20">
        <el-col :span="4" :key="item.id" v-for="item in typePayData">
            <el-card @click="onSeletPayType(item)" class="mt10 cp" shadow="hover" body-style="background:rgb(250, 236, 216)">
                <el-badge :show-zero="false" :value="item.value" class="item" :offset="[10, 5]"><h4>{{item.title}}</h4></el-badge>
            </el-card>
        </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
        <el-col :span="4" :key="item.id" v-for="item in typeData">
            <el-card @click="onSeletPayType(item)" class="mt10 cp" shadow="hover" body-style="background:rgb(225, 243, 216)">
                <el-badge :show-zero="false" :value="item.value" class="item" :offset="[10, 5]"><h4>{{item.title}}</h4></el-badge>
            </el-card>
        </el-col>
    </el-row>
    <el-divider />
    <h3><el-text>申请删除:</el-text></h3>
    <el-row :gutter="20">
        <el-col :span="4" :key="item.id" v-for="item in deleteData">
            <el-card @click="onSeletPayType(item)" class="mt10 cp" shadow="hover" body-style="background:rgb(255, 234, 234)">
                <el-badge :show-zero="false" :value="item.value" class="item" :offset="[10, 5]"><h4>{{item.title}}</h4></el-badge>
            </el-card>
        </el-col>
    </el-row>

    <el-dialog v-model="show" title="申请操作" width="98%" class="m0" @close="onClose" draggable>
        <component v-if="form.model == 'Imprest'" :is="imprest" />
        <component v-if="form.model == 'Reimburse'" :is="reimburse" />
        <component v-if="form.model == 'ProjectInvoice'" :is="projectInvoice" />
        <component v-if="form.model == 'MaterialPay'" :is="materialPay" />
        <component v-if="form.model == 'LaborPay'" :is="laborPay" />
        <component v-if="form.model == 'Leave'" :is="leave" />
        <component v-if="form.model == 'Other'" :is="other" />
        <component v-if="form.model == 'Difficulty'" :is="difficulty" />
        <component v-if="form.model == 'Risk'" :is="risk" />
        <component v-if="form.model == 'Diary'" :is="diary" />
        <component v-if="form.model == 'Stamp'" :is="stamp" />
        <component v-if="form.model == 'Down'" :is="down" />
        <component v-if="form.model == 'Material'" :is="material" />
        <component v-if="form.model == 'Contract' && form.source == 'Material' " source="Material" :is="contract" />
        <component v-if="form.model == 'Labor'" :is="labor" />
        <component v-if="form.model == 'Contract' && form.source == 'Labor' " source="Labor" :is="contract" />
        <component v-if="form.model == 'WarehousesIn'" :is="warehousesIn" />
        <component v-if="form.model == 'WarehousesOut'" :is="warehousesOut" />
        <component v-if="form.model == 'Team'" :is="Team" />
        <component v-if="form.model == 'Supplier'" :is="Supplier" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import imprest from '../comprehensive/pay/imprest.vue';
import reimburse from '../comprehensive/pay/reimburse.vue';
import projectInvoice from '../comprehensive/pay/projectInvoice.vue';
import materialPay from '../comprehensive/pay/materialPay.vue';
import laborPay from '../comprehensive/pay/laborPay.vue';
import leave from '../comprehensive/approve/leave.vue';
import other from '../comprehensive/approve/other.vue';
import difficulty from '../comprehensive/approve/difficulty.vue';
import risk from '../comprehensive/approve/risk.vue';
import stamp from '../comprehensive/approve/stamp.vue';
import down from '../comprehensive/approve/down.vue';
import diary from '../comprehensive/approve/diary.vue';
import material from '../comprehensive/approve/material.vue';
// import materialContract from '../comprehensive/approve/materialContract.vue';
import contract from '../comprehensive/approve/contract.vue';

import labor from '../comprehensive/approve/labor.vue';
// import laborContract from '../comprehensive/approve/laborContract.vue';
import warehousesIn from '../comprehensive/approve/warehousesIn.vue';
import warehousesOut from '../comprehensive/approve/warehousesOut.vue';
import Team from '../comprehensive/approve/team.vue';
import Supplier from '../comprehensive/approve/supplier.vue';
import http from '../../../util/request';
const show = ref(false)
const form = ref<any>({search:'',source:'',model:'ProjectInvoice',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
const typePayData = ref<any>([])
const typeData = ref<any>([])
const deleteData = ref<any>([])

const onSeletPayType = (data: any) => {
    show.value = true
    form.value.model = data.id
    form.value.source = data.source
}

const onGetData = () => {
    http.post('/approve/wait',form.value).then((response:any)=>{
        typePayData.value = response.data.typePayData
        typeData.value = response.data.typeData
        deleteData.value = response.data.deleteData
    })
}

const onClose = () => {
    onGetData()
}

onMounted(()=>{
    onGetData()
})

</script>

<style scoped>

</style>